<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<title>预览图片</title>
		<link rel="stylesheet" type="text/css" href="photoswipe.css" />
		<link rel="stylesheet" type="text/css" href="default-skin.css" />
		<link rel="stylesheet" type="text/css" href="../../css/comment.css"/>
		<style type="text/css">
			body{
				background: #fff;
			}
			
			.my-gallery {
				overflow: hidden;
				background: #fff;
			}
			
			/*.my-gallery figure {
				float: left;
			}*/
			.my-gallery a{
				display: block;
				width:80%;
				height: 80%;
				margin:10%;
				background: #fff;
				position: relative;
			}
			
			.my-gallery a div{
				width:100%;
				height:100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.my-gallery img {
				display: block;
				width: 60%;
				margin: auto;
				opacity: 0;
			}
		</style>
	</head>

	<body>
		<p class="st-item-title st-border-b">九宫格图片排版</p>
		<div>			
		<!--data-pswp-uid在每个相册中必须是唯一的，data-size指定放大时图片显示的宽和高-->
		<div class="my-gallery st-row" data-pswp-uid="1">
			<figure class="st-col st-col-33">
				<a href="../../img/1.JPEG" data-size="670x712">
					<div style="background:url(../../img/1.JPEG)no-repeat center;background-size:cover;"></div>
					<img src="../../img/1.JPEG"/>
				</a>
			</figure>
			<figure class="st-col st-col-33">
				<a href="../../img/2.JPEG" data-size="670x712">
					<div style="background:url(../../img/2.JPEG)no-repeat center;background-size:cover;"></div>
					<img src="../../img/2.JPEG" />
				</a>
			</figure>
			<figure class="st-col st-col-33">
				<a href="../../img/3.JPEG" data-size="670x712">
					<div style="background:url(../../img/3.JPEG)no-repeat center;background-size:cover;"></div>
					<img src="../../img/3.JPEG"/>
				</a>
				
			</figure>
			<figure class="st-col st-col-33">
				<a href="../../img/1.JPEG" data-size="670x712">
					<div style="background:url(../../img/1.JPEG)no-repeat center;background-size:cover;"></div>
					<img src="../../img/3.JPEG"/>
				</a>
			</figure>
			<figure class="st-col st-col-33">
				<a href="../../img/2.JPEG" data-size="670x712">
					<div style="background:url(../../img/2.JPEG)no-repeat center;background-size:cover;"></div>
					<img src="../../img/3.JPEG"/>
				</a>
			</figure>
			<figure class="st-col st-col-33">
				<a href="../../img/3.JPEG" data-size="670x712">
					<div style="background:url(../../img/3.JPEG)no-repeat center;background-size:cover;"></div>
					<img src="../../img/3.JPEG"/>
				</a>
			</figure>
			<figure class="st-col st-col-33"> 
				<a href="../../img/1.JPEG" data-size="670x712">
					<div style="background:url(../../img/1.JPEG)no-repeat center;background-size:cover;"></div>
					<img src="../../img/3.JPEG"/>
				</a>
			</figure>
			<figure class="st-col st-col-33">
				<a href="../../img/2.JPEG" data-size="670x712">
					<div style="background:url(../../img/2.JPEG)no-repeat center;background-size:cover;"></div>
					<img src="../../img/3.JPEG"/>
				</a>
			</figure>
			<figure class="st-col st-col-33">
				<a href="../../img/3.JPEG" data-size="670x712">
					<div style="background:url(../../img/3.JPEG)no-repeat center;background-size:cover;"></div>
					<img src="../../img/3.JPEG"/>
				</a>
			</figure>
		</div>

		</div>

		<!-- 
			Root element of PhotoSwipe. Must have class pswp.
			pswp是 PhotoSwipe的根元素。
		-->
		<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

			<!-- 
				Background of PhotoSwipe. ====》背景层
         		It's a separate element as animating opacity is faster than rgba().
         	-->
			<div class="pswp__bg"></div>

			<!--
				 Slides wrapper with overflow:hidden.
					幻灯片包装溢出:隐藏。
			-->
			<div class="pswp__scroll-wrap">

				<!-- 
					Container that holds slides.====》 容器保存幻灯片
            		PhotoSwipe keeps only 3 of them in the DOM to save memory. ====》PhotoSwipe在DOM中只保存了3个这样的内存。
            		Don't modify these 3 pswp__item elements, data is added later on.====》不要修改这三个pswp项目元素，稍后会添加数据。 
            	-->
				<div class="pswp__container">
					<div class="pswp__item"></div>
					<div class="pswp__item"></div>
					<div class="pswp__item"></div>
				</div>

				<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. 					
					默认（photoswipeuidefault）界面位于滑动区域之上。可以改变。
				-->
				<div class="pswp__ui pswp__ui--hidden">

					<div class="pswp__top-bar">

						<!--  
							Controls are self-explanatory. Order can be changed. 
							自定义点击事件。
						-->

						<div class="pswp__counter"></div>
						<!--关闭-->
						<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
						<!--分享-->
						<button class="pswp__button pswp__button--share" title="Share"></button>

						<!--<button class="pswp__button pswp__button--fs" title="Toggle fullscreen">123</button>-->

						<!--放大缩小-->
						<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

						<!-- 
							element will get class pswp__preloader--active when preloader is running 
							元素将获得类pswp预加载器——在预加载器运行时激活
						-->
						<div class="pswp__preloader">
							<div class="pswp__preloader__icn">
								<div class="pswp__preloader__cut">
									<div class="pswp__preloader__donut"></div>
								</div>
							</div>
						</div>
					</div>

					<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
						<div class="pswp__share-tooltip"></div>
					</div>

					<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>

					<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>

					<div class="pswp__caption">
						<div class="pswp__caption__center"></div>
					</div>

				</div>

			</div>

		</div>

	</body>
	<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="photoswipe.js" type="text/javascript" charset="utf-8"></script>
	<script src="photoswipe-ui-default.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var height = $('.my-gallery figure').width();
		$('.my-gallery figure').height(height)
	</script>
	<script type="text/javascript">
		window.onload = function() {
			auto_data_size();
		};

		function auto_data_size() {
			var imgss = $("figure img");
			$("figure img").each(function() {
				var imgs = new Image();
				imgs.src = $(this).attr("src");
				var w = imgs.width,
					h = imgs.height;
				$(this).parent("a").attr("data-size", "").attr("data-size", w + "x" + h);
			})
		};
		var initPhotoSwipeFromDOM = function(gallerySelector) {

			// 解析来自DOM元素幻灯片数据（URL，标题，大小...）
			// (children of gallerySelector)
			var parseThumbnailElements = function(el) {
				var thumbElements = el.childNodes,
					numNodes = thumbElements.length,
					items = [],
					figureEl,
					linkEl,
					size,
					item;

				for(var i = 0; i < numNodes; i++) {

					figureEl = thumbElements[i]; // <figure> element

					// 仅包括元素节点
					if(figureEl.nodeType !== 1) {
						continue;
					}
					linkEl = figureEl.children[0]; // <a> element

					size = linkEl.getAttribute('data-size').split('x');

					// 创建幻灯片对象
					item = {
						src: linkEl.getAttribute('href'),
						w: parseInt(size[0], 10),
						h: parseInt(size[1], 10)
					};

					if(figureEl.children.length > 1) {
						// <figcaption> content
						item.title = figureEl.children[1].innerHTML;
					}

					if(linkEl.children.length > 0) {
						// <img> 缩略图节点, 检索缩略图网址
						item.msrc = linkEl.children[0].getAttribute('src');
					}

					item.el = figureEl; // 保存链接元素 for getThumbBoundsFn
					items.push(item);
				}

				return items;
			};

			// 查找最近的父节点
			var closest = function closest(el, fn) {
				return el && (fn(el) ? el : closest(el.parentNode, fn));
			};

			// 当用户点击缩略图触发
			var onThumbnailsClick = function(e) {
				e = e || window.event;
				e.preventDefault ? e.preventDefault() : e.returnValue = false;

				var eTarget = e.target || e.srcElement;

				// find root element of slide
				var clickedListItem = closest(eTarget, function(el) {
					return(el.tagName && el.tagName.toUpperCase() === 'FIGURE');
				});

				if(!clickedListItem) {
					return;
				}

				// find index of clicked item by looping through all child nodes
				// alternatively, you may define index via data- attribute
				var clickedGallery = clickedListItem.parentNode,
					childNodes = clickedListItem.parentNode.childNodes,
					numChildNodes = childNodes.length,
					nodeIndex = 0,
					index;

				for(var i = 0; i < numChildNodes; i++) {
					if(childNodes[i].nodeType !== 1) {
						continue;
					}

					if(childNodes[i] === clickedListItem) {
						index = nodeIndex;
						break;
					}
					nodeIndex++;
				}

				if(index >= 0) {
					// open PhotoSwipe if valid index found
					openPhotoSwipe(index, clickedGallery);
				}
				return false;
			};

			// parse picture index and gallery index from URL (#&pid=1&gid=2)
			var photoswipeParseHash = function() {
				var hash = window.location.hash.substring(1),
					params = {};

				if(hash.length < 5) {
					return params;
				}

				var vars = hash.split('&');
				for(var i = 0; i < vars.length; i++) {
					if(!vars[i]) {
						continue;
					}
					var pair = vars[i].split('=');
					if(pair.length < 2) {
						continue;
					}
					params[pair[0]] = pair[1];
				}

				if(params.gid) {
					params.gid = parseInt(params.gid, 10);
				}

				return params;
			};

			var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
				var pswpElement = document.querySelectorAll('.pswp')[0],
					gallery,
					options,
					items;

				items = parseThumbnailElements(galleryElement);

				// 这里可以定义参数
				options = {
					barsSize: {
						top: 100,
						bottom: 100
					},
					fullscreenEl: false, // 是否支持全屏按钮
					shareButtons: [{
						id: 'wechat',
						label: '分享微信',
						url: '#'
					}, {
						id: 'weibo',
						label: '新浪微博',
						url: '#'
					}, {
						id: 'download',
						label: '保存图片',
						url: '{{raw_image_url}}',
						download: true
					}], // 分享按钮

					// define gallery index (for URL)
					galleryUID: galleryElement.getAttribute('data-pswp-uid'),

					getThumbBoundsFn: function(index) {
						// See Options -> getThumbBoundsFn section of documentation for more info
						var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
							pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
							rect = thumbnail.getBoundingClientRect();

						return {
							x: rect.left,
							y: rect.top + pageYScroll,
							w: rect.width
						};
					}

				};

				// PhotoSwipe opened from URL
				if(fromURL) {
					if(options.galleryPIDs) {
						// parse real index when custom PIDs are used 
						for(var j = 0; j < items.length; j++) {
							if(items[j].pid == index) {
								options.index = j;
								break;
							}
						}
					} else {
						// in URL indexes start from 1 URL索引从1开始
						options.index = parseInt(index, 10) - 1;
					}
				} else {
					options.index = parseInt(index, 10);
				}

				// exit if index not found  如果没有找到索引，退出
				if(isNaN(options.index)) {
					return;
				}

				if(disableAnimation) {
					options.showAnimationDuration = 0;
				}

				// Pass data to PhotoSwipe and initialize it
				// 将数据传递给PhotoSwipe并初始化它
				gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
				gallery.init();
			};

			// loop through all gallery elements and bind events
			// 循环遍历所有画廊元素和绑定事件
			var galleryElements = document.querySelectorAll(gallerySelector);

			for(var i = 0, l = galleryElements.length; i < l; i++) {
				galleryElements[i].setAttribute('data-pswp-uid', i + 1);
				galleryElements[i].onclick = onThumbnailsClick;
			}

			// Parse URL and open gallery if it contains #&pid=3&gid=1
			var hashData = photoswipeParseHash();
			if(hashData.pid && hashData.gid) {
				openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
			}
		};

		// execute above function ===>执行initPhotoSwipeFromDOM函数
		initPhotoSwipeFromDOM('.my-gallery');
	</script>

</html>